<template>
	<view class="radius  maoboli ">
		<view>
			<view style="display: flex;">
				<view style=" position: relative;">

					<view style="width: 200rpx;height: 200rpx;">
						<image :src="data.image!=null&&data.image.length>0?data.image[0]:'/static/images/未上传门店照片.png'"
							style="width: 200rpx;height: 200rpx;" class="radius" @click="previewImage(data.image)">
						</image>
						<!-- <text class="gundongtxt">&nbsp;&nbsp;4.5分</text> -->
					</view>

					<view class="imgTap bg-olive">
						多图
					</view>
				</view>
				<view style="flex: 2;" class="margin-left-sm" @click="select">
					<view class="font-title " style="font-size: 30rpx;">
						{{data.title}}
					</view>

					<view class="tapdiv">
						<text
							:class="{'  a1':index%2==0,' a2':index%2==1,'mendianTap margin-bottom-xs font-content':true} "
							v-for="(item,index) in data.tag">{{item}}</text>

					</view>
					<view class="margin-top-xs" style="display: flex;  justify-content: space-between;">
						<view style="display: flex;display: flex;align-items: flex-end;">
							<view style="color: #e40000;" class="">￥</view>
							<view style="color: #e40000;font-size: 40rpx;display: flex;align-items: flex-end" class="">
								&nbsp;&nbsp;{{data.miniPrice}}&nbsp;&nbsp;</view>
							<view>起</view>
						</view>
						<view style="display: flex;display: flex;align-items: flex-end;font-size: 28rpx;">
							<view style=" display: flex;display: flex;align-items: flex-end;color: #999;">
								<uni-icons type="location"
									size="16"></uni-icons>{{data.distance>1000?((data.distance/1000).toFixed(1)+"公里"):(data.distance==null?"未知":data.distance+"米")}}
							</view>
						</view>
						<view>
							<button class="login-btn cu-btn sm block bg-olive" style="font-size: 26rpx;">预定</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 时间点 -->
		</view>


	</view>
</template>

<script>
	import {
		compareDates,
		formatDate
	} from '../../utils/validate';
	export default {
		name: "roomMJ",
		props: {
			data: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				tileNodeList: [

				]
			};
		},
		created() {
			this.getHoursFromNow()
		},
		methods: {
			/**
			 * 打开预约弹框
			 */
			getHoursFromNow() {
				let now = new Date();
				let hoursFrom21 = now.getHours(); // 获取当前小时数
				let hours = [];

				//如果所选日期不是今天 那时间段就是24小时
				if (compareDates(this.data.date, formatDate(new Date())) != 0) {
					hoursFrom21 = 0
				}
				for (let i = hoursFrom21; i < hoursFrom21 + 24; i++) {
					// 将小时数添加到数组中，如果超过24小时，则从0开始
					let a = i % 24
					if (a == 0) {
						// a = '次'
					}
					hours.push(a);
				}

				this.tileNodeList = hours;
			},
			/**
			 * 预览图片
			 */
			previewImage(imgList) {
				this.$emit("showImg", imgList)
			},
			select(imgList) {
				this.$emit("select", this.data)
			}


		}
	}
</script>

<style lang="scss">
	.tapdiv {
		font-size: 20rpx;
		margin-top: 10rpx;
		color: #999;
		flex-wrap: wrap;
		display: flex;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的文本 */
	}

	.mendianTap {
		margin-top: 0rpx;
		padding: 1px 3px;
		margin-right: 8rpx;
		margin-top: 5rpx;
		font-size: 18rpx;
		border-radius: 5px;
	}

	.a1 {
		color: $uni-color-success-sen;
		background-color: $uni-color-success-dan;
	}

	.a2 {
		color: $uni-color-warning-sen;
		background-color: $uni-color-warning-dan;
	}

	.imgTap {
		position: absolute;
		padding: 1px 5px;
		color: #fff;
		top: 0rpx;
		font-size: 20rpx;
		border-bottom-right-radius: 10px;
		border-top-left-radius: 20upx;
	}

	.jinqianfuhao {}

	.shijiandian {
		height: 8rpx;
		background-color: #ccc;
		margin: 0px 2px;
		border-radius: 2px;
	}

	.shijianno {
		background-color: $uni-color-primary;
	}

	.gundongtxt {
		position: absolute;
		// bottom: 0px;
		padding: 2px 0px;
		color: #fff;
		left: 0px;
		z-index: 2;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		// padding-left: 10rpx;
	}
</style>